<template>
  <div class="anime-view">
    <!-- 头部横幅 -->
    <div class="anime-header">
      <div class="anime-banner">
        <img src="../assets/鬼灭之刃.jpeg" alt="动画专区" class="banner-image">
        <div class="banner-overlay">
          <h1>动画专区</h1>
          <p>发现精彩动画，享受二次元世界</p>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="anime-content">
      <!-- 导航标签 -->
      <div class="anime-tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-button"
          :class="{ active: activeTab === tab.id }"
          @click="switchTab(tab.id)"
        >
          {{ tab.name }}
        </button>
      </div>

      <!-- 热播动画 -->
      <section v-if="activeTab === 'hot'" class="anime-section">
        <div class="section-header">
          <h2>🔥 热播动画</h2>
          <div class="hot-anime-tabs">
            <button 
              v-for="hotTab in hotAnimeTabs" 
              :key="hotTab.id"
              class="hot-tab-button"
              :class="{ active: activeHotTab === hotTab.id }"
              @click="switchHotTab(hotTab.id)"
            >
              {{ hotTab.name }}
            </button>
          </div>
        </div>
        
        <div class="anime-grid">
          <div 
            v-for="anime in hotAnimeList" 
            :key="anime.id"
            class="anime-card"
            @click="handleAnimeClick(anime.id)"
          >
            <div class="anime-thumbnail">
              <img :src="anime.thumbnail" :alt="anime.title" class="thumbnail-image">
              <div v-if="anime.badge" class="anime-badge">{{ anime.badge }}</div>
              <div v-if="anime.episodesInfo" class="anime-progress">
                {{ anime.episodesInfo }}
              </div>
              <div class="anime-duration">{{ anime.duration }}</div>
            </div>
            <div class="anime-info">
              <h3 class="anime-title">{{ anime.title }}</h3>
              <div class="anime-stats">
                <span class="anime-views">{{ formatNumber(anime.views) }} 播放</span>
                <span v-if="anime.score" class="anime-score">
                  <i class="score-icon">★</i>{{ anime.score }}
                </span>
              </div>
              <div class="anime-tags">
                <span 
                  v-for="(tag, index) in anime.tags.slice(0, 3)" 
                  :key="index"
                  class="anime-tag"
                >
                  #{{ tag }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div class="section-more">
          <button class="load-more-btn" @click="loadMoreHotAnime">
            查看更多热播动画
          </button>
        </div>
      </section>

      <!-- 新番剧 -->
      <section v-if="activeTab === 'new'" class="anime-section">
        <div class="section-header">
          <h2>✨ 新番剧</h2>
          <div class="season-tabs">
            <button 
              v-for="season in seasons" 
              :key="season.id"
              class="season-tab"
              :class="{ active: activeSeason === season.id }"
              @click="switchSeason(season.id)"
            >
              {{ season.name }}
            </button>
          </div>
        </div>

        <div class="new-anime-list">
          <div class="weekday-nav">
            <button 
              v-for="day in weekdays" 
              :key="day.id"
              class="weekday-btn"
              :class="{ active: activeWeekday === day.id, today: day.id === currentWeekday }"
              @click="switchWeekday(day.id)"
            >
              {{ day.name }}
            </button>
          </div>

          <div class="anime-grid">
            <div 
              v-for="anime in newAnimeList" 
              :key="anime.id"
              class="anime-card"
              @click="handleAnimeClick(anime.id)"
            >
              <div class="anime-thumbnail">
                <img :src="anime.thumbnail" :alt="anime.title" class="thumbnail-image">
                <div v-if="anime.updateInfo" class="anime-update-badge">
                  {{ anime.updateInfo }}
                </div>
                <div class="anime-duration">{{ anime.duration }}</div>
              </div>
              <div class="anime-info">
                <h3 class="anime-title">{{ anime.title }}</h3>
                <div class="anime-stats">
                  <span class="anime-views">{{ formatNumber(anime.views) }} 播放</span>
                  <span v-if="anime.score" class="anime-score">
                    <i class="score-icon">★</i>{{ anime.score }}
                  </span>
                </div>
                <div v-if="anime.studio" class="anime-studio">
                  {{ anime.studio }}
                </div>
              </div>
            </div>
          </div>

          <div class="section-more">
            <button class="load-more-btn" @click="loadMoreNewAnime">
              查看更多新番剧
            </button>
          </div>
        </div>
      </section>

      <!-- 番剧分类 -->
      <section v-if="activeTab === 'category'" class="anime-section">
        <div class="section-header">
          <h2>📚 番剧分类</h2>
        </div>

        <div class="category-grid">
          <div 
            v-for="category in categories" 
            :key="category.id"
            class="category-card"
            @click="handleCategoryClick(category.id)"
          >
            <div class="category-image">
              <img :src="category.image" :alt="category.name" class="category-img">
            </div>
            <div class="category-info">
              <h3 class="category-name">{{ category.name }}</h3>
              <p class="category-count">{{ category.count }} 部番剧</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 动画排行榜 -->
      <section v-if="activeTab === 'ranking'" class="anime-section">
        <div class="section-header">
          <h2>🏆 动画排行榜</h2>
          <div class="ranking-tabs">
            <button 
              v-for="rankTab in rankingTabs" 
              :key="rankTab.id"
              class="rank-tab"
              :class="{ active: activeRankTab === rankTab.id }"
              @click="switchRankTab(rankTab.id)"
            >
              {{ rankTab.name }}
            </button>
          </div>
        </div>

        <div class="ranking-list">
          <div 
            v-for="(anime, index) in rankingList" 
            :key="anime.id"
            class="ranking-item"
            :class="{ 'top1': index === 0, 'top2': index === 1, 'top3': index === 2 }"
            @click="handleAnimeClick(anime.id)"
          >
            <div class="ranking-number">{{ index + 1 }}</div>
            <div class="ranking-thumbnail">
              <img :src="anime.thumbnail" :alt="anime.title" class="ranking-img">
            </div>
            <div class="ranking-info">
              <h3 class="ranking-title">{{ anime.title }}</h3>
              <div class="ranking-stats">
                <span v-if="anime.score" class="ranking-score">
                  评分: {{ anime.score }}
                </span>
                <span class="ranking-views">{{ formatNumber(anime.views) }} 播放</span>
              </div>
              <div class="ranking-tags">
                <span 
                  v-for="(tag, i) in anime.tags.slice(0, 3)" 
                  :key="i"
                  class="ranking-tag"
                >
                  #{{ tag }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import animeImage from '../assets/动漫.png'
import demonSlayerImage from '../assets/鬼灭之刃.jpeg'
import blackMythImage from '../assets/黑神话.jpeg'

export default {
  name: 'AnimeView',
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    // 获取当前星期几
    const getCurrentWeekday = () => {
      const weekdays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
      return weekdays[new Date().getDay()]
    }
    
    return {
      router,
      route,
      currentWeekday: getCurrentWeekday(),
    }
  },
  data() {
    return {
      // 标签页配置
      tabs: [
        { id: 'hot', name: '热播动画' },
        { id: 'new', name: '新番剧' },
        { id: 'category', name: '番剧分类' },
        { id: 'ranking', name: '排行榜' },
      ],
      activeTab: 'hot',
      
      // 热播动画标签
      hotAnimeTabs: [
        { id: 'all', name: '全部' },
        { id: 'ongoing', name: '连载中' },
        { id: 'finished', name: '已完结' },
      ],
      activeHotTab: 'all',
      
      // 季节标签
      seasons: [
        { id: '2024_summer', name: '2024夏季' },
        { id: '2024_spring', name: '2024春季' },
        { id: '2023_winter', name: '2023冬季' },
        { id: '2023_fall', name: '2023秋季' },
      ],
      activeSeason: '2024_summer',
      
      // 星期几导航
      weekdays: [
        { id: 'mon', name: '周一' },
        { id: 'tue', name: '周二' },
        { id: 'wed', name: '周三' },
        { id: 'thu', name: '周四' },
        { id: 'fri', name: '周五' },
        { id: 'sat', name: '周六' },
        { id: 'sun', name: '周日' },
      ],
      activeWeekday: 'mon',
      
      // 排行榜标签
      rankingTabs: [
        { id: 'total', name: '总榜' },
        { id: 'weekly', name: '周榜' },
        { id: 'monthly', name: '月榜' },
      ],
      activeRankTab: 'total',
      
      // 热播动画数据
      hotAnimeList: [
        {
          id: 1,
          title: '鬼灭之刃 无限城篇',
          thumbnail: demonSlayerImage,
          views: 2350000,
          score: 9.8,
          duration: '23:45',
          episodesInfo: '更新至第15集',
          badge: '热播',
          tags: ['热血', '冒险', '奇幻'],
        },
        {
          id: 2,
          title: '原神 第三季',
          thumbnail: '/src/assets/周杰伦.png',
          views: 1870000,
          score: 9.5,
          duration: '24:15',
          episodesInfo: '更新至第8集',
          badge: '新番',
          tags: ['奇幻', '冒险', '游戏改'],
        },
        {
          id: 3,
          title: '黑神话：悟空 动画版',
          thumbnail: blackMythImage,
          views: 1560000,
          score: 9.7,
          duration: '25:30',
          episodesInfo: '全12集',
          badge: '完结',
          tags: ['动作', '奇幻', '国产'],
        },
        {
          id: 4,
          title: '进击的巨人 最终季 Part3',
          thumbnail: '/src/assets/悟空.jpg',
          views: 1420000,
          score: 9.9,
          duration: '28:10',
          episodesInfo: '全1话',
          badge: '完结',
          tags: ['热血', '战争', '悬疑'],
        },
        {
          id: 5,
          title: '我的英雄学院 第七季',
          thumbnail: '/src/assets/周杰伦.png',
          views: 1280000,
          score: 9.3,
          duration: '24:05',
          episodesInfo: '更新至第10集',
          badge: '热播',
          tags: ['热血', '超能力', '校园'],
        },
        {
          id: 6,
          title: '间谍过家家 第三季',
          thumbnail: '/src/assets/悟空.jpg',
          views: 1150000,
          score: 9.6,
          duration: '23:40',
          episodesInfo: '更新至第7集',
          badge: '新番',
          tags: ['喜剧', '间谍', '日常'],
        },
        {
          id: 7,
          title: '龙珠超 第二部',
          thumbnail: '/src/assets/悟空.jpg',
          views: 1080000,
          score: 9.2,
          duration: '24:30',
          episodesInfo: '更新至第22集',
          badge: '经典',
          tags: ['热血', '动作', '经典'],
        },
        {
          id: 8,
          title: '咒术回战 第二季',
          thumbnail: '/src/assets/周杰伦.png',
          views: 980000,
          score: 9.4,
          duration: '23:50',
          episodesInfo: '更新至第18集',
          badge: '热播',
          tags: ['热血', '战斗', '奇幻'],
        },
      ],
      
      // 新番剧数据
      newAnimeList: [
        {
          id: 9,
          title: '蓝色监狱 第二季',
          thumbnail: '/src/assets/黑悟空.jpg',
          views: 890000,
          score: 9.3,
          duration: '24:10',
          updateInfo: '周一更新',
          studio: '8Bit',
          tags: ['体育', '热血', '校园'],
        },
        {
          id: 10,
          title: '葬送的芙莉莲',
          thumbnail: '/src/assets/黑悟空.jpg',
          views: 780000,
          score: 9.7,
          duration: '24:20',
          updateInfo: '周五更新',
          studio: 'Madhouse',
          tags: ['奇幻', '冒险', '治愈'],
        },
        {
          id: 11,
          title: '灵能百分百 第三季',
          thumbnail: '/src/assets/黑悟空.jpg',
          views: 720000,
          score: 9.6,
          duration: '24:45',
          updateInfo: '周三更新',
          studio: 'BONES',
          tags: ['超能力', '搞笑', '成长'],
        },
        {          id: 12,          title: '地狱乐',          thumbnail: '/src/assets/悟空.jpg',          views: 680000,          score: 9.2,          duration: '24:15',          updateInfo: '周六更新',          studio: 'MAPPA',          tags: ['战斗', '奇幻', '热血']        },
        {          id: 13,          title: '链锯人 第二季',          thumbnail: '/src/assets/黑悟空.jpg',          views: 650000,          score: 9.5,          duration: '24:30',          updateInfo: '周二更新',          studio: 'MAPPA',          tags: ['黑暗', '战斗', '奇幻']        },
        {
          id: 14,
          title: '关于我转生变成史莱姆这档事 第三季',
          thumbnail: '/src/assets/周杰伦.png',
          views: 620000,
          score: 9.1,
          duration: '24:00',
          updateInfo: '周四更新',
          studio: '8Bit',
          tags: ['异世界', '冒险', '奇幻'],
        },
        {
          id: 15,
          title: '排球少年 第五季',
          thumbnail: '/src/assets/悟空.jpg',
          views: 590000,
          score: 9.4,
          duration: '24:25',
          updateInfo: '周日更新',
          studio: 'Production I.G',
          tags: ['体育', '热血', '校园'],
        },
        {
          id: 16,
          title: '无职转生 第二季 Part2',
          thumbnail: '/src/assets/黑悟空.jpg',
          views: 570000,
          score: 9.3,
          duration: '24:40',
          updateInfo: '周一更新',
          studio: 'Studio Bind',
          tags: ['异世界', '冒险', '成长'],
        },
      ],
      
      // 番剧分类数据
      categories: [
        {
          id: 'action',
          name: '热血动作',
          count: 356,
          image: '/src/assets/悟空.jpg',
        },
        {
          id: 'fantasy',
          name: '奇幻冒险',
          count: 428,
          image: '/src/assets/黑悟空.jpg',
        },
        {
          id: 'romance',
          name: '恋爱日常',
          count: 298,
          image: '/src/assets/周杰伦.png',
        },
        {
          id: 'comedy',
          name: '搞笑喜剧',
          count: 312,
          image: '/src/assets/悟空.jpg',
        },
        {
          id: 'school',
          name: '校园青春',
          count: 287,
          image: '/src/assets/黑悟空.jpg',
        },
        {
          id: 'sports',
          name: '体育竞技',
          count: 156,
          image: '/src/assets/周杰伦.png',
        },
        {
          id: 'isekai',
          name: '异世界',
          count: 265,
          image: '/src/assets/悟空.jpg',
        },
        {
          id: 'scifi',
          name: '科幻未来',
          count: 198,
          image: '/src/assets/黑悟空.jpg',
        },
      ],
      
      // 动画排行榜数据
      rankingList: [
        {
          id: 17,
          title: '鬼灭之刃 无限城篇',
          thumbnail: demonSlayerImage,
          views: 2350000,
          score: 9.8,
          tags: ['热血', '冒险', '奇幻'],
        },
        {
          id: 18,
          title: '进击的巨人 最终季 Part3',
          thumbnail: '/src/assets/悟空.jpg',
          views: 1420000,
          score: 9.9,
          tags: ['热血', '战争', '悬疑'],
        },
        {
          id: 19,
          title: '黑神话：悟空 动画版',
          thumbnail: blackMythImage,
          views: 1560000,
          score: 9.7,
          tags: ['动作', '奇幻', '国产'],
        },
        {
          id: 20,
          title: '葬送的芙莉莲',
          thumbnail: '/src/assets/黑悟空.jpg',
          views: 780000,
          score: 9.7,
          tags: ['奇幻', '冒险', '治愈'],
        },
        {
          id: 21,
          title: '原神 第三季',
          thumbnail: '/src/assets/周杰伦.png',
          views: 1870000,
          score: 9.5,
          tags: ['奇幻', '冒险', '游戏改'],
        },
        {
          id: 22,
          title: '间谍过家家 第三季',
          thumbnail: '/src/assets/悟空.jpg',
          views: 1150000,
          score: 9.6,
          tags: ['喜剧', '间谍', '日常'],
        },
        {
          id: 23,
          title: '灵能百分百 第三季',
          thumbnail: '/src/assets/黑悟空.jpg',
          views: 720000,
          score: 9.6,
          tags: ['超能力', '搞笑', '成长'],
        },
        {
          id: 24,
          title: '咒术回战 第二季',
          thumbnail: '/src/assets/周杰伦.png',
          views: 980000,
          score: 9.4,
          tags: ['热血', '战斗', '奇幻'],
        },
      ],
    }
  },
  
  mounted() {
    // 检查URL参数，如果有tab参数则切换到对应的标签页
    const tabParam = this.route.query.tab
    if (tabParam && ['hot', 'new', 'category', 'ranking'].includes(tabParam)) {
      this.switchTab(tabParam)
    }
  },
  methods: {
    // 切换主标签页
    switchTab(tabId) {
      this.activeTab = tabId
    },
    
    // 切换热播动画标签
    switchHotTab(tabId) {
      this.activeHotTab = tabId
      // 这里可以根据标签筛选动画
    },
    
    // 切换季节
    switchSeason(seasonId) {
      this.activeSeason = seasonId
      // 这里可以根据季节筛选新番
    },
    
    // 切换星期几
    switchWeekday(weekdayId) {
      this.activeWeekday = weekdayId
      // 这里可以根据星期几筛选更新的动画
    },
    
    // 切换排行榜类型
    switchRankTab(tabId) {
      this.activeRankTab = tabId
      // 这里可以根据排行榜类型刷新数据
    },
    
    // 处理动画点击
    handleAnimeClick(animeId) {
      this.router.push(`/video/${animeId}`)
    },
    
    // 处理分类点击
    handleCategoryClick(categoryId) {
      // 可以跳转到分类详情页或筛选当前页面
      alert(`跳转到${this.categories.find(c => c.id === categoryId)?.name}分类`)
    },
    
    // 加载更多热播动画
    loadMoreHotAnime() {
      // 模拟加载更多
      console.log('加载更多热播动画')
      alert('已加载全部热播动画')
    },
    
    // 加载更多新番剧
    loadMoreNewAnime() {
      // 模拟加载更多
      console.log('加载更多新番剧')
      alert('已加载全部新番剧')
    },
    
    // 格式化数字
    formatNumber(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },
  },
}
</script>

<style scoped>
.anime-view {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 头部横幅样式 */
.anime-header {
  width: 100%;
  position: relative;
}

.anime-banner {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-overlay h1 {
  font-size: 48px;
  margin: 0 0 16px 0;
  font-weight: 700;
}

.banner-overlay p {
  font-size: 20px;
  margin: 0;
  opacity: 0.9;
}

/* 主要内容区域 */
.anime-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

/* 标签页样式 */
.anime-tabs {
  display: flex;
  background-color: white;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.tab-button {
  flex: 1;
  padding: 12px 24px;
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 100px;
}

.tab-button:hover {
  color: #00a1d6;
  background-color: #f0f9ff;
}

.tab-button.active {
  color: #00a1d6;
  background-color: #e3f2fd;
  font-weight: 600;
}

/* 区域标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.section-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 动画网格布局 */
.anime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

/* 动画卡片样式 */
.anime-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.anime-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 缩略图容器 */
.anime-thumbnail {
  position: relative;
  padding-top: 56.25%; /* 16:9 比例 */
  overflow: hidden;
}

.thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.anime-card:hover .thumbnail-image {
  transform: scale(1.05);
}

/* 动画徽章 */
.anime-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #ff6b6b;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

/* 剧集信息 */
.anime-progress {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 时长信息 */
.anime-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 更新信息 */
.anime-update-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #00a1d6;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

/* 动画信息 */
.anime-info {
  padding: 16px;
}

.anime-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anime-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #999;
}

.anime-score {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ff6b00;
  font-weight: 600;
}

.score-icon {
  font-size: 14px;
}

.anime-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.anime-tag {
  font-size: 12px;
  color: #00a1d6;
  background-color: #e3f2fd;
  padding: 2px 8px;
  border-radius: 12px;
}

.anime-studio {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

/* 加载更多按钮 */
.section-more {
  text-align: center;
  margin-top: 24px;
}

.load-more-btn {
  padding: 10px 24px;
  background-color: #00a1d6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.load-more-btn:hover {
  background-color: #0080b8;
}

/* 热播动画标签 */
.hot-anime-tabs {
  display: flex;
  gap: 8px;
}

.hot-tab-button {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  background-color: white;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.hot-tab-button:hover {
  color: #00a1d6;
  border-color: #00a1d6;
}

.hot-tab-button.active {
  color: white;
  background-color: #00a1d6;
  border-color: #00a1d6;
}

/* 季节标签 */
.season-tabs {
  display: flex;
  gap: 8px;
}

.season-tab {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  background-color: white;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.season-tab:hover {
  color: #00a1d6;
  border-color: #00a1d6;
}

.season-tab.active {
  color: white;
  background-color: #00a1d6;
  border-color: #00a1d6;
}

/* 星期导航 */
.weekday-nav {
  display: flex;
  background-color: white;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  justify-content: space-around;
}

.weekday-btn {
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: 14px;
  color: #666;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 60px;
}

.weekday-btn:hover {
  color: #00a1d6;
  background-color: #f0f9ff;
}

.weekday-btn.active {
  color: #00a1d6;
  background-color: #e3f2fd;
  font-weight: 600;
}

.weekday-btn.today {
  color: #ff6b6b;
  font-weight: 600;
}

.weekday-btn.today.active {
  background-color: #ffebee;
  color: #ff6b6b;
}

/* 分类网格 */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* 分类卡片 */
.category-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.category-image {
  height: 160px;
  overflow: hidden;
}

.category-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.category-card:hover .category-img {
  transform: scale(1.05);
}

.category-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.category-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.category-count {
  font-size: 14px;
  color: #999;
  margin: 0;
}

/* 排行榜列表 */
.ranking-list {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 排行榜项 */
.ranking-item {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s;
  cursor: pointer;
}

.ranking-item:hover {
  background-color: #f8f9fa;
}

.ranking-item:last-child {
  border-bottom: none;
}

/* 排行榜前三名特殊样式 */
.ranking-item.top1 .ranking-number {
  background-color: #ffd700;
  color: #333;
}

.ranking-item.top2 .ranking-number {
  background-color: #c0c0c0;
  color: #333;
}

.ranking-item.top3 .ranking-number {
  background-color: #cd7f32;
  color: white;
}

/* 排名数字 */
.ranking-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  margin-right: 16px;
  flex-shrink: 0;
}

/* 排行榜缩略图 */
.ranking-thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 16px;
  flex-shrink: 0;
}

.ranking-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 排行榜信息 */
.ranking-info {
  flex: 1;
  min-width: 0;
}

.ranking-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #999;
}

.ranking-score {
  color: #ff6b00;
  font-weight: 600;
}

.ranking-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ranking-tag {
  font-size: 12px;
  color: #00a1d6;
  background-color: #e3f2fd;
  padding: 2px 8px;
  border-radius: 12px;
}

/* 排行榜标签 */
.ranking-tabs {
  display: flex;
  gap: 8px;
}

.rank-tab {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  background-color: white;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.rank-tab:hover {
  color: #00a1d6;
  border-color: #00a1d6;
}

.rank-tab.active {
  color: white;
  background-color: #00a1d6;
  border-color: #00a1d6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-overlay h1 {
    font-size: 36px;
  }
  
  .banner-overlay p {
    font-size: 18px;
  }
  
  .anime-content {
    padding: 16px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .anime-tabs {
    flex-wrap: nowrap;
  }
  
  .anime-grid,
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  
  .anime-title {
    font-size: 14px;
  }
  
  .ranking-item {
    padding: 12px 16px;
  }
  
  .ranking-thumbnail {
    width: 48px;
    height: 48px;
  }
  
  .ranking-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .anime-banner {
    height: 200px;
  }
  
  .banner-overlay h1 {
    font-size: 28px;
  }
  
  .banner-overlay p {
    font-size: 16px;
  }
  
  .anime-grid,
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  .ranking-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>